/
 * 系统分组
 */
<template>
  <div class="Goods">
    <div class="main">
    <!--列表-->
    <div class="banManage">
      <span>系统分组</span>
      <el-button class="newbanner" type="primary">导入商品</el-button>
    </div>
    <div class="tableBox">
      <div class="systemHead" @click="flag = !flag">
         <div class='system' @click="select" >
        <img src="../../assets/img/dropDown.png" alt="" width="14px" height="14px" :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}">
        <span>系统分组</span>
      </div>
      <el-switch v-model="value1" inactive-text="分组显示" active-color="#07C160" @change="groupe(e)"></el-switch>
      </div>
      <div class="systemCon" v-show="show">
        <div class="newProducts" v-for="(item,index) in news" :key='index'>
          <div class="putOn">
            <p>{{item.text}} <span>{{item.con}} </span></p>
          </div>
         <el-switch v-model="item.value" inactive-text="分组显示" active-color="#07C160"></el-switch>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import { deptList, deptSave, deptDelete } from '../../api/userMG'
import Pagination from '../../components/Pagination'
import axios from 'axios'
export default {

  // 注册组件
  components: {
    Pagination
  },
  data() {
    return {
      show:true,
      value1:true,
      flag:false,
      news:[
        {text:'*新品上架',con:'( 系统自动读取最新上架的20个商品 )',value:true},
        {text:'*热销排行',con:'( 系统自动读取最新上架的20个商品 )',value:true},
        {text:'*未分组',value:true}
      ]
    }
  },
  created(){
    this.groups()
  },
  methods:{
   groups(){
    this.$axios({
        method: 'post',
        url: '/index/system_grouping',
        params: {
          
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
      }).then(res=>{
        console.log(res)
      });
   },
    select(){
      this.show=!this.show
    },
    groupe(e){
      console.log(e)
      if(this.value1==true){
        this.news[0].value=true
        this.news[1].value=true
        this.news[2].value=true
      }else{
        this.news[0].value=false
        this.news[1].value=false
        this.news[2].value=false
      }
    }
  }
}
</script>

<style scoped>
  .arrowTransform{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(180deg);
  }
  .arrowTransformReturn{
    transition: 0.2s;
    transform-origin: center;
    transform: rotateZ(0deg);
  }
.banManage{background-color: #fff;padding:0 20px;overflow: hidden;line-height:95px;}
.banManage span{font-size: 1rem;font-weight: bold;color: #3D3D3D;}
.banManage .newbanner{float:right;width: 100px;height: 38px;background: #426AF2;border-radius: 5px;font-size:0.875rem;margin-top:24px;margin-right: 50px;}
.main{background-color: #fff;padding:0 30px;box-sizing:border-box;}
.tableBox{background-color: #FFFFFF;padding:20px;}
.systemHead{display: flex;justify-content: space-between;margin-top: 5px;}
.system{font-size: 0.875rem;color: #6F6F6F;cursor: pointer;}
.system img{vertical-align: middle;margin-right: 10px;margin-left: 41px;}
.systemCon{margin-top: 36px;padding-left: 68px;box-sizing: border-box;}
/deep/ .el-switch__label.is-active{color:#7F7F7F;}
/deep/ .el-switch__label{color:#7F7F7F;font-size: 0.875rem !important;margin-top: 5px;}
.newProducts{display: flex;justify-content: space-between;height: 56px}
.newProducts .putOn p{color: #426AF2;font-size: 0.875rem;margin: 0;}
.newProducts .putOn span{color: #666666;font-size:12px;}
.el-switch{margin-right: 269px;}
</style>